<route lang="json5">
{
  style: {
    navigationBarTitleText: '详细信息',
    navigationStyle: 'custom',
    // #ifdef MP-ALIPAY
    enablePullDownRefresh: false,
    'mp-alipay': {
      allowsBounceVertical: 'NO',
      transparentTitle: 'always',
      titlePenetrate: 'YES',
      defaultTitle: '',
    },
    // #endif
  },
}
</route>
<template>
  <CustomNavbar :title="'书籍信息'" />
  <scroll-view :scroll-top="scrollTop" :scroll-y="true" class="scroll-Y">
    <view class="container">
      <uni-forms class="form" :modelValue="form" label-position="left">
        <uni-forms-item label="封面" name="bookAvatar">
          <view style="position: relative; left: 20%; text-align: center; align-items: center">
            <uni-file-picker
              ref="avaterPickerRef"
              :value="[{ name: form.bookName, extname: '', url: form.bookAvatar }]"
              limit="1"
              :del-icon="false"
              disable-preview
              :imageStyles="imageStyles"
              file-mediatype="image"
              :disabled="true"
            ></uni-file-picker>
          </view>
        </uni-forms-item>
        <uni-forms-item label="书名" name="bookName">
          <uni-easyinput type="text" v-model="form.bookName" :disabled="true" />
        </uni-forms-item>
        <uni-forms-item label="作者" name="author">
          <uni-easyinput type="text" v-model="form.author" :disabled="true" />
        </uni-forms-item>
        <uni-forms-item label="描述" name="description">
          <uni-easyinput type="textarea" v-model="form.description" :disabled="true" />
        </uni-forms-item>
        <uni-forms-item label="状态" name="author">
          <uni-tag
            :text="form.statusStr"
            :type="form.status == BookStatus.PENDING ? 'primary' : 'warning'"
          />
        </uni-forms-item>
        <uni-forms-item label="持有人" name="author">
          <uni-easyinput type="text" v-model="form.userName" :disabled="true" />
        </uni-forms-item>

        <uni-forms-item label="借阅" name="author">
          <button
            class="mini-btn optBtn"
            hover-class="button-active"
            size="mini"
            @tap="borrow(form)"
            :disabled="form.status != BookStatus.PENDING && form.status != BookStatus.BORROWING"
          >
            申请借阅
          </button>
        </uni-forms-item>
      </uni-forms>
    </view>
  </scroll-view>
</template>

<script lang="ts" setup>
import CustomNavbar from '@/components/CustomNavbar.vue'
import { bookInfoApi } from '@/service/book'
import { Book } from '@/types/book'
import { useBookStore } from '@/store/book'
import { useUserStore } from '@/store/user'
import { BookStatus } from '@/enums/BookStatus'
import { borrowApi } from '@/service/order'
import { Order } from '@/types/order'
import { getSameGroupApi } from '@/service/group'
let bookRef = useBookStore()
let userRef = useUserStore()
let form = ref<Book>({ ...bookRef.initBook })

let scrollTop = ref(0)
const isTriggered = ref(false)

// 小组头像
const imageStyles = {
  width: 120,
  height: 120,
}

const props = defineProps<{
  id: number
}>()

onLoad(async () => {
  console.log(props.id)
  const bookRes = await bookInfoApi(props.id)
  console.log(bookRes)
  form.value = bookRes.data
  // const userInfoRes = await userInfoApi(props.id)
  // console.log('userInfoRes', userInfoRes)
  // dataList.value = [userInfoRes.data.bookList, userInfoRes.data.groupList]
})

const borrow = async (book: Book) => {
  console.log(book)
  const sameGroupListRes = await getSameGroupApi(book.userId)
  if (book.userId == userRef.userInfo.id) {
    uni.showToast({
      title: '无法借自己的书籍',
      icon: 'none',
      mask: true,
    })
    return
  }
  if (sameGroupListRes.data.length == 0) {
    uni.navigateTo({ url: '/pages/search/userInfo?id=' + book.userId + '&activeIndex=1' })
    uni.showToast({
      title: '与持有人不同组',
      icon: 'none',
      mask: true,
    })
    return
  }
  uni.navigateTo({ url: '/pages/functions/borrow?bookId=' + book.id + '&userId=' + book.userId })
}
</script>

<style lang="scss">
.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 90%;
  padding: 30rpx;
  margin-top: 30rpx;
}
.form {
  background-color: #ffffff;
}
.bottom {
  margin-top: 70rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  > .submit {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    color: #fff;
    text-align: center;
    background: $main-color;
  }
}

.optBtn {
  width: 100%;
  color: #fff;
  font-size: 25rpx;
  background-color: $main-color-hight;
  margin-bottom: 100rpx;
}
.button-active {
  background-color: $main-color; /* 点击时的背景颜色 */
}

.scroll-Y {
  width: 100%;
  height: calc(100vh - var(--window-top));
}
</style>
